<!-- 编辑试题弹窗组件 -->
<template>
  <el-dialog title="编辑试题" :visible.sync="dialogVisible" width="1200px" append-to-body custom-class="edit-dialog" @close="handleClose">
    <el-form :inline="true" :model="searchForm" ref="searchForm" class="search-form">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="题型" label-width="80px" class="full-width-item">
            <el-select v-model="searchForm.type" placeholder="请选择题型" clearable>
              <el-option label="单选题" value="1"></el-option>
              <el-option label="多选题" value="2"></el-option>
              <el-option label="判断题" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="题干" label-width="80px" class="full-width-item">
            <el-input v-model="searchForm.content" placeholder="请输入题干" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="试题等级" label-width="80px" class="full-width-item">
            <el-select v-model="searchForm.level" placeholder="请选择等级" clearable>
              <el-option label="必考" value="1"></el-option>
              <el-option label="选考" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="form-buttons">
        <el-button icon="el-icon-refresh" @click="handleReset">重 置</el-button>
        <el-button type="primary" @click="handleSearch" icon="el-icon-search">查 询</el-button>
      </div>
    </el-form>

    <div class="table-container">
      <div class="table-header">
        <div class="refresh-btn">
          <el-button icon="el-icon-refresh" circle @click="handleRefresh"></el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>
        <el-table-column prop="type" label="题型" width="120"></el-table-column>
        <el-table-column prop="content" label="题干"></el-table-column>
        <el-table-column prop="level" label="试题等级" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" icon="el-icon-edit" class="table-btn">编辑</el-button>
            <el-button @click="handleDelete(scope.$index)" type="text" icon="el-icon-delete" class="table-btn" style="color: #D91515;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 嵌套的编辑弹窗 -->
    <el-dialog
      width="800px"
      title="编辑"
      :visible.sync="showEditDialog"
      append-to-body
      custom-class="nested-dialog"
    >
      <el-form :model="editForm" ref="editForm" label-width="80px">
        <el-form-item label="题型" prop="type">
          <el-select v-model="editForm.type" placeholder="请选择题型" class="full-width">
            <el-option label="单选题" value="1"></el-option>
            <el-option label="多选题" value="2"></el-option>
            <el-option label="判断题" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题干" prop="content">
          <el-input v-model="editForm.content" placeholder="请输入题干"></el-input>
        </el-form-item>
        <el-form-item label="试题等级" prop="level">
          <el-select v-model="editForm.level" placeholder="请选择等级" class="full-width">
            <el-option label="必考" value="1"></el-option>
            <el-option label="选考" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
export default {
  name: 'EditQuestionDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false,
      showEditDialog: false,
      searchForm: {
        type: '',
        content: '',
        level: ''
      },
      editForm: {
        type: '',
        content: '',
        level: ''
      },
      currentRow: null
    }
  },
  watch: {
    visible: {
      handler(val) {
        this.dialogVisible = val;
      },
      immediate: true
    },
    dialogVisible(val) {
      if (!val) {
        this.$emit('update:visible', false);
      }
    }
  },
  methods: {
    handleClose() {
      this.$refs.searchForm.resetFields();
      this.$emit('update:visible', false);
    },
    handleSearch() {
      // 实现搜索逻辑
      this.$emit('search', this.searchForm);
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
    },
    handleRefresh() {
      this.$emit('refresh');
    },
    handleEdit(row) {
      this.currentRow = row;
      this.editForm = {
        type: row.type === '单选题' ? '1' : row.type === '多选题' ? '2' : '3',
        content: row.content,
        level: row.level === '必考' ? '1' : '2'
      };
      this.showEditDialog = true;
    },
    handleDelete(index) {
      this.$confirm('确认删除该条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('delete', index);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    submitEdit() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          const editedData = {
            type: this.editForm.type === '1' ? '单选题' : this.editForm.type === '2' ? '多选题' : '判断题',
            content: this.editForm.content,
            level: this.editForm.level === '1' ? '必考' : '选考'
          };
          this.$emit('edit', { index: this.tableData.indexOf(this.currentRow), data: editedData });
          this.showEditDialog = false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog {
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #E2E7F5;
    
    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #393939;
    }
  }

  .el-dialog__body {
    padding: 24px;
  }
}

.search-form {
  margin-bottom: 20px;
  
  ::v-deep .el-form-item {
    margin-bottom: 20px;
    
    .el-form-item__label {
      font-weight: 500;
      color: #393939;
    }
  }
}

.form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;

  .el-button {
    height: 32px;
    line-height: 0;
    padding: 8px 15px;

    &.el-button--primary {
      background-color: #2265EE;
    }
  }
}

.table-container {
  .table-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;

    .refresh-btn {
      .el-button {
        height: 32px;
        line-height: 0;
        padding: 8px;
        border-color: #E2E7F5;
        color: #393939;
      }
    }
  }
}

::v-deep .el-table {
  th {
    background-color: #f5f7fa;
    color: #606266;
    padding: 12px 0;
  }
  td {
    padding: 12px 0;
  }
  .table-btn {
    padding: 0 8px;
    margin-right: 8px;
  }
}

.full-width-item {
  width: 100%;
  margin-right: 0;
  
  ::v-deep .el-form-item__content {
    width: calc(100% - 80px);
    
    .el-select,
    .el-input {
      width: 100%;
    }
  }
}

::v-deep .el-input__inner {
  height: 36px;
  line-height: 36px;
  border-color: #E2E7F5;
}

.nested-dialog {
  .el-dialog__footer {
    padding: 16px 24px;
    border-top: 1px solid #E2E7F5;
    text-align: right;
  }

  .el-button {
    height: 32px;
    line-height: 0;
    padding: 8px 15px;

    &.el-button--primary {
      background-color: #2265EE;
    }
  }
}
</style> 